<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:54:41
 -->
<template>
  <div>
    <div class="clearfix">
      <h3 class="fl">库存预警</h3>
    </div>
    <!-- <el-button @click="btnVali">校验</el-button> -->
    <el-divider />
    <vxe-grid
      ref="table"
      border
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :edit-rules="validRules"
      :columns="columnsData"
      :data="originStockData"
    />
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { specs } from './mixins'
import { initDefaultStockWarnData, initUpdateStockWarnData } from './utils/stock-warn'

export default {
  name: 'StockWarn',
  mixins: [oftenuse, specs],
  props: {
    /**
     * 规格数据
     */
    skuData: {
      type: Object,
      default: () => { return {} }
    },
    storeData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      originStockData: [], // 期初信息
      isWarnSame: true,
      originColumnsData: [
        { field: 'minQtyWarning',
          title: '最小预警量', width: 160,
          slots: {
            default: (params) => {
              const { row, column, $table } = params
              const data = {
                props: {
                  value: row[column.property]
                },
                on: {
                  input(value) {
                    const result = value.replace(/[^\d.]/g, '') || 0
                    row[column.property] = result
                    $table.updateStatus(params)
                  }
                }
              }
              return [<el-input {...data}/>]
            }
          }
        },
        { field: 'maxQtyWarning',
          title: '最大预警量', width: 160,
          slots: {
            default: (params) => {
              const { row, column, $table } = params
              const data = {
                props: {
                  value: row[column.property]
                },
                on: {
                  input(value) {
                    const result = value.replace(/[^\d.]/g, '') || 0
                    row[column.property] = result
                    $table.updateStatus(params)
                  }
                }
              }
              return [<el-input {...data}/>]
            }
          }
        }
      ],
      validRules: {
        minQtyWarning: [
          { required: true, message: '商品数量必填' },
          { trigger: 'change', validator: ({ row, cellValue }) => {
            let { minQtyWarning, maxQtyWarning } = row
            minQtyWarning = Number(minQtyWarning)
            maxQtyWarning = Number(maxQtyWarning)
            return new Promise((resolve, reject) => {
              if (minQtyWarning === 0 && maxQtyWarning === 0) return resolve()
              if (maxQtyWarning <= minQtyWarning) {
                reject(new Error(`最大预警不能小于等于最小预警数！`))
              } else {
                resolve()
              }
            })
          } }
        ],
        maxQtyWarning: [
          { required: true, message: '商品数量必填' },
          { trigger: 'change', validator: ({ row, cellValue }) => {
            let { minQtyWarning, maxQtyWarning } = row
            minQtyWarning = Number(minQtyWarning)
            maxQtyWarning = Number(maxQtyWarning)
            return new Promise((resolve, reject) => {
              if (minQtyWarning === 0 && maxQtyWarning === 0) return resolve()
              if (maxQtyWarning <= minQtyWarning) {
                reject(new Error(`最大预警不能小于等于最小预警数！`))
              } else {
                resolve()
              }
            })
          } }
        ]
      }
    }
  },
  computed: {
    columnsData: function() {
      const originColumnsData = this.originColumnsData || []
      return [...originColumnsData]
    }
  },
  watch: {
    'skuData': {
      handler(skuData) {
        if (!skuData) return
        const { goodsStockWarnList } = skuData
        this.initData(goodsStockWarnList)
      },
      immediate: true
    },
    'storeData': {
      handler() {
        const skuData = this.skuData
        if (!skuData) return
        const { goodsStockWarnList } = skuData
        this.initData(goodsStockWarnList)
      }
    }
  },
  created() {},
  methods: {
    btnVali() {
      this.valiData().then(_ => {
        console.log(_)
      })
    },
    // export api
    getStockWarnData() {
      return this.originStockData
    },
    async valiData() {
      const postData = this.originStockData
      const errMap = await this.$refs.table.validate(postData).catch(errMap => errMap)
      return new Promise((resovel, reject) => {
        if (errMap) {
          reject(errMap)
        } else {
          resovel('校验成功！')
        }
      })
    },
    //
    initData(goodsStockWarnList) {
      if (goodsStockWarnList) {
        this.originStockData = initUpdateStockWarnData(goodsStockWarnList)
        return
      }
      const data = this.storeData
      this.originStockData = initDefaultStockWarnData(data)
    },
    onChange({ row, column }) {
      if (!this.isWarnSame) return
      const field = column.property
      const value = row[field]
      this.originStockData.forEach(item => {
        this.$set(item, field, value)
      })
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal{
    margin: 5px 0;
  }
</style>
